<template>
  <div id="app">
    <!-- 头部导航 -->
    <header class="header">
      <el-row>
        <el-col :span="24">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            :default-active="activeIndex"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">音乐管理</el-menu-item>
            <el-menu-item index="3">客户管理</el-menu-item>
            <el-menu-item index="4">系统设置</el-menu-item>
            <el-menu-item index="5">活动发布</el-menu-item>
            <el-row v-if="isLogin" class="menu-right menu-padding menu-padding-right">
              <el-button size="small" @click="resetPwd">修改密码</el-button>
            </el-row>
            <el-row v-if="isLogin" class="menu-right menu-padding">
              <el-button size="small" @click="logout">退出登录</el-button>
            </el-row>
            <el-row class="menu-right">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </el-row>
          </el-menu>
        </el-col>
      </el-row>
    </header>
    <main>
      <div class="main-right">
        <el-backtop> UP</el-backtop>
        <el-row v-if="indexShow">
          <el-carousel :interval="4000" type="card" height="300px" style="padding-top: 14px;">
            <el-carousel-item v-for="(item, index) in banners" :key="index">
              <img class="image" :src="item.url">
            </el-carousel-item>
          </el-carousel>
          <!-- <el-col>
            <img src="../assets/welcome.png" class="image">
          </el-col> -->
          <el-col :span="11" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '0px' }">
              <div style="padding: 14px;">
                <span style="font-size: 1.5em; color: #409EFF;">欢迎来到轻听音乐</span>
              </div>
              <img src="../../assets/img/background.jpg" class="image">
              <div style="padding: 14px;">
                <span>轻听音乐</span>
                <div class="bottom clearfix">
                  <span class="time">{{ time }}</span>
                  <span class="date">{{ date }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row v-if="musicShow">
          <el-col :span="4" v-for="(item,index) in musicList" :key="index" style="margin: 15px">
            <el-card :body-style="{ padding: '5px' }">
              <div style="padding: 10px; font-size: 10px; overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                white-space:nowrap;
                height:24px;
                display:block;">
                <el-tooltip class="item" effect="light" :content="item.name" placement="bottom">
                  <span>{{item.name}}</span>
                </el-tooltip>
              </div>
              <img src="../../assets/img/background.jpg" class="image">
              <el-button size="mini" type="text" @click="edit(false, item)">播放音乐</el-button>
              <el-button size="mini" type="text" @click="detail(true, item)">音乐MV</el-button>
            </el-card>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" v-if="isShow">
          <el-tab-pane label="用户管理" name="first">
            <el-collapse v-model="activeNames">
              <el-collapse-item name="1">
                <template slot="title">
                  <i style="color: blue; margin-left: 2%; font-size: 1.2em; font-style:normal; font-weight: bold;">用户信息管理</i>
                </template>
                <el-tabs class="user-table" type="border-card" :tab-position="tabPosition">
                  <el-table :data="userTableData" height="350" border
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-table-column prop="userName" label="昵称" width="120">
                    </el-table-column>
                    <el-table-column prop="mobilePhone" label="手机号码" width="140">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" width="140">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.sex" :disabled="true" placeholder="请选择性别">
                          <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="140">
                    </el-table-column>
                    <el-table-column prop="birthDay" label="生日" width="140">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
                        <el-button size="small" type="danger" icon="el-icon-delete"  @click="handleDelete(scope.$index, scope.row)"></el-button>
                        <el-button size="small" type="info" icon="el-icon-user"  @click="handleDetail(scope.$index, scope.row)"></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="block" style="float: right; margin-top: 20px;">
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[1, 5, 10, 50]"
                      :page-size="1"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="totalPage">
                    </el-pagination>
                  </div>
                </el-tabs>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">
            <img-upload></img-upload>
          </el-tab-pane>
          <el-tab-pane label="角色管理" name="third">
            <el-collapse v-model="activeNames">
              <el-collapse-item name="1">
                <template slot="title">
                  <i style="color: blue; margin-left: 2%; font-size: 1.2em; font-style:normal; font-weight: bold;">角色管理</i>
                </template>
                <el-tabs class="user-table" type="border-card" :tab-position="tabPosition">
                  <el-table :data="userTableData" height="350" border
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-table-column prop="userName" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="mobilePhone" label="手机号码" width="140">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" width="140">
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="140">
                    </el-table-column>
                    <el-table-column prop="birthDay" label="生日" width="140">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
                        <el-button size="small" type="danger" icon="el-icon-delete"  @click="handleDelete(scope.$index, scope.row)"></el-button>
                        <el-button size="small" type="info" icon="el-icon-user"  @click="handleDetail(scope.$index, scope.row)"></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="block" style="float: right; margin-top: 20px;">
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[1, 5, 10, 50]"
                      :page-size="1"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="totalPage">
                    </el-pagination>
                  </div>
                </el-tabs>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>
    </main>
    <el-dialog :title="title" :visible.sync="detailShow" width="50%" height="100%" style=" overflow: hidden;">
      <user-info-detail :form-disabled="disabled" :rule-form="ruleForm"></user-info-detail>
      <el-col slot="footer" class="dialog-footer" :span="24">
        <el-row>
          <el-col class="text-center" :span="12" :offset="6">
            <el-button @click="detailShow = false" style="width:100%;font-weight: bold;color: #409EFF;">返回</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-dialog>
    <el-dialog :visible.sync="musicDetailShow" width="100%" height="100%" style="overflow: hidden;">
      <music-play ref="musicPlay" :form-disabled="disabled" :song-list="songList"></music-play>
      <el-col slot="footer" class="dialog-footer" :span="24">
        <el-row>
          <el-col class="text-center" :span="12" :offset="6">
            <div><player :music-url="musicUrl"></player></div>
          </el-col>
        </el-row>
      </el-col>
    </el-dialog>
  </div>
</template>
<script>
import { userInfo, logout, getSongList } from '../../api/index'
import MusicPlay from '../musicPlay/musicPlay'
import Player from '../player/player.vue'
import UserInfoDetail from '../userInfoDetail/userInfoDetail'
import imgUpload from '../imgUpload/imgUpload'
export default {
  name: 'Index',
  components: {
    UserInfoDetail,
    MusicPlay,
    Player,
    imgUpload
  },
  data: function () {
    return {
      activeIndex: '1',
      active: true,
      tabPosition: 'left',
      activeName: 'first',
      activeNames: ['1'],
      userTableData: [],
      hasClick: false,
      loading: false,
      currentPage: 1,
      totalPage: 1,
      isShow: false,
      indexShow: false,
      musicShow: false,
      musicDetailShow: false,
      currentDate: new Date(),
      date: '',
      time: '',
      detailShow: false,
      title: '',
      disabled: false,
      isLogin: false, // 是否登陆
      ruleForm: {},
      options: [
        {
          value: '1',
          label: '男'
        }, {
          value: '2',
          label: '女'
        }
      ],
      musicList: [],
      songList: [],
      musicUrl: '',
      imgSrc: require('../../assets/img/background.jpg'),
      banners: [
        {
          id: 1,
          url: require('../../assets/banner/index1.jpg')
        },
        {
          id: 2,
          url: require('../../assets/banner/index2.jpg')
        },
        {
          id: 3,
          url: require('../../assets/banner/index3.jpg')
        },
        {
          id: 4,
          url: require('../../assets/banner/index4.jpg')
        },
        {
          id: 5,
          url: require('../../assets/banner/index5.jpg')
        },
        {
          id: 6,
          url: require('../../assets/banner/index6.jpg')
        }
      ]
    }
  },
  methods: {
    /**
     * 切换菜单
     */
    handleSelect: function (key, keyPath) {
      var that = this
      console.log(key, keyPath)
      if (key === '1') {
        that.indexShow = true
      } else {
        that.indexShow = false
      }
      if (key === '2') {
        that.musicShow = true
        that.getSongList()
      } else {
        that.musicShow = false
      }
      if (key === '3') {
        that.isShow = true
        that.getUserInfo()
      } else {
        that.isShow = false
      }
      if (key === '4') {
      } else {
      }
      if (key === '5') {
      } else {
      }
    },
    /**
     * 切换tab
     */
    handleClick: function (tab, event) {
      var that = this
      console.log(tab)
      that.hasClick = true
      if (tab.name === 'first' && that.hasClick) {
        that.loading = true
        that.getUserInfo()
      }
      if (tab.name === 'second') {
      }
      if (tab.name === 'third') {
      }
      if (tab.name === 'fourth') {
      }
    },
    formatSex: function (row, column, cellValue, index) {
      return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
    },
    /**
     * 查询用户信息
     */
    getSongList: function () {
      var that = this
      var params = {}
      getSongList(params)
        .then(res => {
          that.hasClick = false
          that.loading = false
          if (res.code === '000000') {
            console.log('歌曲列表：' + JSON.stringify(res.songList))
            that.musicList = res.songList
            that.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
          } else {
            that.$message({
              message: res.message,
              type: 'warning',
              showClose: true
            })
          }
        })
        .catch(failResponse => {})
    },
    /**
     * 查询用户信息
     */
    getUserInfo: function () {
      var that = this
      var params = {}
      params.pageNo = 1
      params.pageSize = 10
      userInfo(params)
        .then(res => {
          that.hasClick = false
          that.loading = false
          if (res.code === '000000') {
            that.userTableData = res.userInfo.subList
            that.totalPage = res.userInfo.total
            that.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
          } else {
            that.$message({
              message: res.message,
              type: 'warning',
              showClose: true
            })
          }
        })
        .catch(failResponse => {})
    },
    /**
     * 编辑
     */
    handleEdit: function (index, row) {
      console.log(index, row)
      this.title = '修改用户信息'
      this.disabled = false
      this.ruleForm = row
      this.detailShow = true
    },
    /**
     * 删除
     */
    handleDelete: function (index, row) {
      var that = this
      console.log(index, row)
      that.$confirm('此操作将删除该用户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: true
      }).then(() => {
        that.userTableData.splice(index, 1)
        that.$message({
          type: 'success',
          message: '删除成功!',
          showClose: true
        })
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消删除',
          showClose: true
        })
      })
    },
    /**
     * 查看详细信息
     */
    handleDetail: function (index, row) {
      console.log(index, row)
      this.title = '查看用户详细信息'
      this.disabled = true
      this.ruleForm = row
      this.detailShow = true
    },
    /**
     * 退出登录
     */
    logout: function () {
      var that = this
      var params = {}
      that.$confirm('是否要安全退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        logout(params)
          .then(res => {
            if (res.code === '000000') {
              that.$router.push({path: '/page/login/login'})
              that.$message({
                message: res.message,
                type: 'success',
                showClose: true
              })
            } else {
              that.$message({
                message: res.message,
                type: 'warning',
                showClose: true
              })
            }
          })
          .catch(failResponse => {})
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消退出登录',
          showClose: true
        })
      })
    },
    /**
     * 修改密码
     */
    resetPwd: function () {
      var that = this
      that.$router.push({path: '/page/resetPwd/resetPwd'})
    },
    /**
     * 每页展示条数改变时触发
     */
    handleSizeChange: function (val) {
      console.log(`每页 ${val} 条`)
    },
    /**
     * 当前页改变时触发
     */
    handleCurrentChange: function (val) {
      console.log(`当前页: ${val}`)
    },
    // 编辑音乐
    edit: function (flagDisabled, item) {
      var that = this
      console.log(item)
      that.songList = item
      that.title = item.name
      that.musicUrl = item.url
      that.musicDetailShow = true
    },
    // 查看音乐
    detail: function (flagDisabled, item) {
      console.log(item)
    },
    getdate: function () {
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let time = new Date()
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let day = time.getDate()
      let week = weeks[time.getDay()]
      this.getTime()
      this.date = year + '/' + month + '/' + day + ' ' + week
    },
    getTime: function () {
      let time = new Date()
      let hour = time.getHours()
      let minutes = time.getMinutes()
      let seconds = time.getSeconds()
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      if (seconds < 10) {
        seconds = '0' + seconds
      }
      this.time = hour + ':' + minutes + ':' + seconds
    }
  },
  mounted: function () {
    var that = this
    that.indexShow = true
    that.getdate()
    that.timer = setInterval(function () {
      that.getdate()
    }, 10)
  }
}
</script>
 <style>
body {
  margin: 0;
}
#app {
  min-width: 1200px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "PingFang SC", Arial, sans-serif;
}
/* 头部导航 */
header {
  z-index: 1000;
  min-width: 1200px;
  transition: all 0.5s ease;
  /* border-top: solid 4px #3091f2; */
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
header.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
header .el-menu-demo {
  padding-left: 50px !important;
}
/* 主内容区 */
main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 500px;
  border: solid 40px #e9ecf1;
  background-color: #fcfcfc;
}
main .main-left {
  text-align: center;
  width: 200px;
  float: left;
}
main .main-right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #fff;
  /* padding: 50px 70px; */
}
main .el-menu {
  background-color: transparent !important;
}
main .user-table {
  min-width: 80%;
}
.menu-right{
  float: right;
  margin: 0.5% 0.5%;
}
.menu-padding {
  padding-top: 5px;
}
.menu-padding-right {
  margin-right: 40px;
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.el-dialog__footer {
  padding: 10px 20px 60px!important;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-dialog{
  margin:0!important;
  display:flex;
  flex-direction:column;
  max-height:calc(100% - 30px);
  max-width:calc(100% - 30px);
}
.el-dialog__body{
  transform: translate3d(0,0,0);
  overflow:auto;
  overflow-y: hidden;
}
/* .el-dialog__header {
  padding: 20px 20px 20px 20px!important;
  border-bottom: 1px solid #f4f4f4;
} */
.el-dialog__footer {
  text-align: center!important;
  padding: 12px 20px 12px 20px!important;
  border-top: 1px solid #f4f4f4;
}
.el-dialog__headerbtn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 24px!important;
}
.el-dialog__wrapper {
  display:flex;
  justify-content: center;
  align-items:center;
}
.background{
  margin: -50px;
  z-index: -1;
  position: absolute;
}
.back-top-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
</style>
